<template>
    <view class="wrap" style="padding-bottom: 60px;">
        <u-card class="task-list-item" :border="false" padding="20" margin="20rpx">
            <view slot="head" style="display: flex;align-items: center;justify-content: space-between;">
                <view style="display: flex;align-items: center;font-size: 30rpx;">{{currentStatus}}</view><view style="color: #999999;font-size: 22rpx;"></view>
            </view>
            <view class="" slot="body">
                <u-row gutter="16">
                    <u-col span="12">
                   <!--     <view class="apply-text"><span>项目号：</span>100001001</view>
                        <view class="apply-text"><span>客户名称：</span>张三</view>
                        <view class="apply-text"><span>地址：</span>那是一条神奇的天路</view>
                        <view class="apply-text"><span>业主电话：</span>13331587963</view> -->
						
						<view class="apply-text" v-for="(child,idx) in columns" :key="idx">
							<span>{{child.title}}：</span>{{queryParam[child.dataIndex] || ''}}
						</view>
                    </u-col>
                </u-row>
           <!--     <u-time-line style="padding-top: 30rpx;">
                    <u-time-line-item v-for="(item,index) in list" :key="item.id" style="padding-top: 10rpx;">
                        <template v-slot:node>
                            <view v-if="item.flag" class="u-node" style="background: #19be6b;">
                                此处为uView的icon组件
                                <u-icon name="checkbox-mark" color="#fff" :size="24"></u-icon>
                            </view>
                            <view v-else class="u-node" style="background: #ff4d4f;">
								
                                此处为uView的icon组件
                                <u-icon name="pause" color="#fff" :size="24"></u-icon>
                            </view>
                        </template>
                        此处自定义了左边内容，用一个图标替代
                        <template v-slot:content>
                            <view>
                                <view class="u-order-title">{{item.processName}} </view>
                            </view>
                        </template>
                    </u-time-line-item>
                </u-time-line> -->
                
            </view>
            
        </u-card>
        <u-row gutter="32" class="bottom-box" justify="center">
            <u-col span="12">
                <view>
					<u-button v-if="unCompleteIndex>-1" type="primary" shape="circle" @click="submit()">确定{{unCompleteItem.processName}}</u-button>
					<u-button v-else disabled type="primary" shape="circle">确定{{unCompleteItem.processName || ''}}</u-button>
				</view>
            </u-col>
        </u-row>
    </view>
</template>
 
<script>
	import uTimeLine from '@/uview-ui/components/u-time-line/u-time-line'
    export default {
		components:{
			uTimeLine
		},
        data() {
            return {
                show: false,
                queryParam: {},
                list:[],
                fileList: [],
                text: null,
				unCompleteIndex:-2,
				unCompleteItem:{},
				currentStatus:'',
				
				columns: [
					{
						title: '产品编号',
						dataIndex: 'productCode',
						ellipsis: true,
						align: 'left',
						width: '12.8%'
					},
					{
						title: '品牌',
						dataIndex: 'brand',
						ellipsis: true,
						align: 'left',
						width: '12.8%'
					},
					{
						title: '颜色',
						dataIndex: 'color',
						ellipsis: true,
						align: 'left',
						width: '12.8%'
					},
					{
						title: '规格',
						dataIndex: 'spec',
						align: 'right',
						width: '12.8%'
					},
					{
						title: '型号',
						dataIndex: 'model',
						align: 'right',
						width: '12.8%'
					},
				],
            }
        },
        onLoad(options){
			
				this.queryParam= options
				console.log(options);
            this.getDetail()
        },
        methods: {
            submit(){
                // let pages = getCurrentPages();
                // let prevPage = pages[pages.length - 2]; //上一个页面
                // // prevPage.$vm.getList(); 
                // uni.navigateBack()
				let param ={
					processId: this.unCompleteItem.id,
					processPlanId:this.queryParam.planId,
					orderId:this.queryParam.productOrderId
				}
				this.$u.api.addRecord(param).then(res=>{
					console.log(res);
				})
            },
            navTo(url) {
                uni.navigateTo({
                    url: url
                });
            },
            // 删除图片
            deletePic(event) {
                this[`fileList${event.name}`].splice(event.index, 1)
            },
            // 新增图片
            async afterRead(event) {
                // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
                let lists = [].concat(event.file)
                let fileListLen = this[`fileList${event.name}`].length
                lists.map((item) => {
                    this[`fileList${event.name}`].push({
                        ...item,
                        status: 'uploading',
                        message: '上传中'
                    })
                })
                for (let i = 0; i < lists.length; i++) {
                    const result = await this.uploadFilePromise(lists[i].url)
                    let item = this[`fileList${event.name}`][fileListLen]
                    this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
                        status: 'success',
                        message: '',
                        url: result
                    }))
                    fileListLen++
                }
            },
            uploadFilePromise(url) {
                return new Promise((resolve, reject) => {
                    let a = uni.uploadFile({
                        url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
                        filePath: url,
                        name: 'file',
                        formData: {
                            user: 'test'
                        },
                        success: (res) => {
                            setTimeout(() => {
                                resolve(res.data.data)
                            }, 1000)
                        }
                    });
                })
            },
			
			getDetail(){
				let param ={
					productOrderId: this.queryParam.productOrderId,//销售单id
					orderCode: this.queryParam.orderCode,//生产单号
					productId:this.queryParam.productId,// 商品id
					planId:this.queryParam.planId, //工序计划id
					planProcessId:this.queryParam.planProcessId //工序id
				}
				this.$u.api.getProductPlanDetail(param).then(res=>{
					this.list = res.data || []
					// 获取第一个没有完成的工序
					this.unCompleteIndex = this.list.findIndex(v=>!v.flag)
					if(this.unCompleteIndex>-1){
						this.unCompleteItem = this.list[this.unCompleteIndex]
						
					}
					this.currentStatus = this.unCompleteIndex >-1 ?'当前状态：待' + this.unCompleteItem.processName : (this.unCompleteIndex === -1 ? '当前状态：已完成' : '')
				})
			}
    
        }
        
    }
</script>
 
<style lang="scss" scoped>
@import 'index.scss';
page {
    background-color: #f5f5f5;
}
.wrap .search{
    background: #ffffff;
}
.apply-text{
    font-size: 28rpx;
    color: #333333;
    span{
        color: #999999;
    }
}
.user-images{
    width: 28px;
    height:28px;
    margin-right: 8px;
}
.apply-list-foot{
    font-size: 28rpx;
}
.personnel-list{
    display: flex;
    align-items: center;
    flex-wrap:wrap;
    .personnel-user{
        position: relative;
        margin: 5px 9px 0;
    }
    .user-images{
        width: 48px;
        height:48px;
        margin-right:0;
        
    }
    .iconfont{
        position: absolute;
        top:-12px;
        right:-5px;
        color: #FE0100;
    }
}
.u-node {
        width: 44rpx;
        height: 44rpx;
        border-radius: 100rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #d0d0d0;
    }
    
    .u-order-title {
        color: #333333;
        font-weight: bold;
        font-size: 32rpx;
    }
    
    .u-order-desc {
        color: rgb(150, 150, 150);
        font-size: 28rpx;
        margin-bottom: 6rpx;
    }
    
    .u-order-time {
        color: rgb(200, 200, 200);
        font-size: 26rpx;
    }
</style>
<style>
	.u-time-axis::before{
		border-left-color: red;
	}
</style>